<template>
    <div>
    <Header></Header>
    <Nav></Nav>
    <span class="headertitle">研究阶段1</span>
    <el-tag type="warning" class="box-card1">温馨提示:在研究阶段一至少上传两次活动材料，最多上传5次活动材料，活动材料上传完毕后，清点击操作列下对应课题的“提交”按钮，进入下一阶段！</el-tag>
    <el-card class="box-card">
      <el-table
                  ref="multipleTable"
                  :data="tableData"
                  tooltip-effect="dark"
                >
                <el-table-column type="selection" width="50"></el-table-column>
             <el-table-column prop="num1" label="课题编号" width="140" ></el-table-column>
             <el-table-column prop="num2" label="课题名称" width="300" ></el-table-column>
             <el-table-column prop="num3" label="活动次数" width="150"></el-table-column>
             <el-table-column prop="num4" label="上传部门" width="150"></el-table-column>
             <el-table-column prop="num5" label="上传用户" width="120"></el-table-column>
             <el-table-column prop="num6" label="上传时间"></el-table-column>
             <el-table-column label="操作"><el-link type="primary" @click="dialogVisible = true">请上传</el-link></el-table-column>
             <el-table-column label="操作">
              <el-link type="primary" @click="dialogVisible =true">上传材料</el-link>
              <el-link type="primary" style="margin-left: 10px;">查看材料</el-link>
              <el-link type="primary"  style="margin-left: 10px;">提交</el-link>
            </el-table-column>
            </el-table>
    </el-card>
    <!-- 上传材料 -->
    <el-dialog
      title="活动材料"
      :visible.sync="dialogVisible"
      width="40%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="课题名称">
          <el-input v-model="form.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="活动标题">
          <el-input v-model="form.name2" placeholder="请输入活动标题"></el-input>
        </el-form-item>
        <el-form-item label="活动材料">
          <el-upload
            action="" 
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible2">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
          </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    </div>
</template>

<script>
import Header from '../Header.vue'
import Nav from '../Nav.vue'
export default {
    data(){
        return {
          tableData:[{
            num1:'20221217001',
            num2:'《古猿人进化史》',
            num3:'0',
            num4:'暂无',
            num5:'张三',
            num6:'2022-12-24 15:04:00',
          },{
            num1:'20221217001',
            num2:'《古猿人进化史》',
            num3:'0',
            num4:'暂无',
            num5:'张三',
            num6:'2022-12-24 15:04:00',
          }],
          dialogVisible:false,
          form:{
            name:'广西高校教师信息技术应用能力监测与整体提升研究',
            name2:'',
          },
          dialogImageUrl: '',
        dialogVisible2: false
        }
    },
    components:{
    Header,
    Nav
  },
  methods:{
    // 文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    // 点击文件列表中已上传的文件时的钩子
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
  }
}
</script>

<style lang="less" scoped>
    .box-card{
        width: 91%;
        float: right;
        margin-right: 1%;
        margin-top: -40%;
    }
    .box-card1{
        width: 91%;
        float: right;
        height: 50px;
        line-height: 50px;
        font-size: 14px;
        margin-right: 1%;
        margin-top: -44%;
    }
body{
  position: relative;
}
.headertitle{
  position: absolute;
  top: 0;
  z-index: 999;
  margin-top: 20px;
  margin-left: 180px;
  font-size: 18px;
}
</style>